<script type="text/javascript">
    jQuery(document).ready(function() {
        // Smart Wizard     
        jQuery('#wizard').smartWizard({onFinish: onFinishCallback});
        jQuery('#wizard2').smartWizard({onFinish: onFinishCallback});
        jQuery('#wizard3').smartWizard({onFinish: onFinishCallback});
        // Active Menu
        jQuery("#left-menu li#dashboard").removeClass("active");
        jQuery("#left-menu li#clinic").removeClass("active");
        jQuery("#left-menu li#opd").addClass("active");
        //Final Button Click
        function onFinishCallback() {
            alert('Save Record Clicked');
        }
        jQuery('select, input:checkbox').uniform();
    });

</script>

<div id="mainwrapper" class="mainwrapper">
    <!--HEADER STARTS -->
    <?php echo $this->element('header'); ?>

    <!--HEADER ENDS-->
    <div class="leftpanel">
        <!-- LEFT MENU -->
        <?php echo $this->element('side_menu'); ?>
    </div><!-- leftpanel -->

    <div class="rightpanel">
        <ul class="breadcrumbs">
            <li><a href="#"><i class="iconfa-home"></i></a> <span class="separator"></span></li>
            <li><a href="forms.html">OPD</a> <span class="separator"></span></li>
            <li>Register First Time Visit</li>
        </ul>
        <div class="pageheader">
            <form action="results.html" method="post" class="searchbar">
                <input type="text" name="keyword" placeholder="To search type and hit enter..." />
            </form>
            <div class="pageicon"><span class="iconfa-pencil"></span></div>
            <div class="pagetitle">
                <h5>OPD</h5>
                <h1>Patient Record</h1>
            </div>
        </div><!--pageheader-->

        <div class="maincontent">
            <div class="maincontentinner">
                <div class="widgetbox box-inverse">
                    <!-- START OF TABBED WIZARD -->
                    <!--<h4 class="subtitle2">Tabbed Wizard</h4>
                    <br />-->
                    <form class="stdform" method="post" action="">
                        <div id="wizard3" class="wizard tabbedwizard">

                            <ul class="tabbedmenu">
                                <li>
                                    <a href="#wiz3step1">
                                        <span class="h2">FORM 1</span>
                                        <span class="label">Personal Information</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#wiz3step2">
                                        <span class="h2">FORM 2</span>
                                        <span class="label">Other Information</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#wiz3step3">
                                        <span class="h2">FORM 3</span>
                                        <span class="label">Payment Information</span>
                                    </a>
                                </li>
                            </ul>

                            <div id="wiz3step1" class="formwiz">
                                <?php //echo $this->element('p_details'); ?>
                                <h4>Form 1: Personal Information</h4>
                                <div>
                                    <div style="float:left; margin-left: -80px; padding-right: 60px">
                                        <p>
                                            <label>First Name</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>
                                        <p>
                                            <label>Middle Name</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>
                                        <p>
                                            <label>Last Name</label>
                                            <input type="text" name="lastname" class="input-large" />
                                        </p>
                                        <p>
                                            <label>Gender </label>
                                            <select name="selection" id="selection" class="uniformselect" style="opacity:1 !important; border: solid 1px #ccc;">
                                                <option value="">Choose One</option>
                                                <option value="1">Female</option>
                                                <option value="2">Male</option>
                                            </select>
                                        </p>

                                        <p>
                                            <label>Date of Birth</label>
                                            <input type="date" name="lastname" class="input-large" />
                                        </p>
                                    </div>
                                    <div style="float:left; margin-left: -80px; padding-right: 60px">
                                        <p>
                                            <label>Email</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>

                                        <p>
                                            <label>Address</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>
                                        <p>
                                            <label>Occupation</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>

                                        <p>

                                            <label> Nationality </label>
                                            <select name="selection" id="selection" class="uniformselect" style="opacity:1 !important; border: solid 1px #ccc;">
                                                <option value="">Choose One</option>
                                                <option value="1">Ghanaian</option>
                                                <option value="2">Nigerian</option>
                                            </select>
                                        </p>
                                        <p>
                                            <label>Religion</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>
                                    </div>
                                </div>
                            </div><!--#wiz13tep1-->

                            <div id="wiz3step2" class="formwiz">
                                <h4>Form 2: Other Information</h4> 
                                <div>
                                    <div style="float:left; margin-left: -80px; padding-right: 60px">
                                        <p>
                                            <label>Patient Type.</label>
                                            <select name="selection" id="selection" class="uniformselect" style="opacity:1 !important; border: solid 1px #ccc;">
                                                <option value="">Choose One</option>
                                                <option value="1">In-Patient</option>
                                                <option value="2">Out-Patient</option>
                                            </select>
                                        </p>
                                        <p>
                                            <label>Package Type </label>
                                            <select name="selection" id="selection" class="uniformselect" style="opacity:1 !important; border: solid 1px #ccc;">
                                                <option value="">Choose One</option>
                                                <option value="1">Cash and Carry</option>
                                                <option value="2">Coporate</option>
                                            </select>
                                        </p>

                                        <p>
                                            <label>SSN No.</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>
                                        <p>
                                            <label>Marital Status</label>
                                            <select name="selection" id="selection" class="uniformselect" style="opacity:1 !important; border: solid 1px #ccc;">
                                                <option value="">Choose One</option>
                                                <option value="1">Married</option>
                                                <option value="2">Single</option>
                                            </select>
                                        </p>

                                        <p>
                                            <label>Area</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>

                                        <p>
                                            <label>Street Name </label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>
                                    </div>
                                    <div style="float:left; margin-left: -80px; padding-right: 60px">
                                        <p>
                                            <label>City</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>
                                        <p>
                                            <label>Landmark</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>

                                        <p>
                                            <label>Emergency Person</label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>
                                        <p>
                                            <label>Emergency No </label>
                                            <input type="text" name="firstname" class="input-large" />
                                        </p>
                                        <p>
                                            <label>Patient Photo.</label>
                                            <input type="file" name="firstname" class="input-large" />
                                        </p>
                                    </div>
                                </div>
                            </div><!--#wiz3step2-->

                            <div id="wiz3step3">
                                <h4>Form 3: Payment Information</h4>
                                <div>
                                    <div style="float:left; margin-left: -80px; padding-right: 60px">
                                        <p>
                                            <label> Payment Method </label>
                                            <select name="selection" id="selection" class="uniformselect" style="opacity:1 !important; border: solid 1px #ccc;">
                                                <option value="">Choose One</option>
                                                <option value="1">Cash</option>
                                                <option value="2">Health Insurance</option>
                                            </select>
                                        </p>
                                        <p>
                                            <label>Insurance No.</label>
                                            <input type="text" name="firstname" class="input-large" />

                                        </p>
                                    </div>
                                    <div style="float:left; margin-left: -80px; padding-right: 60px">
                                        <p>
                                            <label>Insurance Type </label>
                                            <select name="selection" id="selection" class="uniformselect" style="opacity:1 !important; border: solid 1px #ccc;">
                                                <option value="">Choose One</option>
                                                <option value="1">NHIS</option>
                                                <option value="2">Corporate Insurance</option>
                                            </select>
                                        </p>
                                        <p>
                                            <label>Expiring Date</label>
                                            <input type="date" name="lastname" class="input-large" />
                                        </p>
                                    </div>
                                </div>
                            </div><!--#wiz3step3-->

                        </div><!--#wizard-->
                    </form>
                    <!-- END OF TABBED WIZARD -->
                </div><!--widgetcontent-->
            </div><!--widget-->
        </div><!--maincontent-->
    </div><!--rightpanel-->
</div><!--mainwrapper-->



